<template>
	<div>
		<div class="h2">活动状态统计</div>
		<div id="components-form-demo-advanced-search">
			<a-form class="ant-advanced-search-form home-form" :form="form" @submit="handleSearch">
				<a-row :gutter="24">
					<a-col :span="8">
						<a-form-item label="学期">
							<a-select v-decorator="['semesterID']" placeholder="全部" optionFilterProp="children" showSearch>
								<a-select-option v-for="(item, index) in semesterIDList" :key="item.ID" :value="item.ID">{{ item.Name }}</a-select-option>
							</a-select>
						</a-form-item>
					</a-col>
					<a-col :span="8">
						<a-form-item label="申请类型">
							<a-select :allowClear="true" v-decorator="['applyType']" placeholder="全部" optionFilterProp="children" showSearch>
								<a-select-option v-for="(item, index) in ApplyTypeList" :key="item.Key" :value="item.Key">{{ item.Value }}</a-select-option>
							</a-select>
						</a-form-item>
					</a-col>
					<a-col :span="8">
						<a-form-item label="申请时间"><a-range-picker v-decorator="['data']" /></a-form-item>
					</a-col>
				</a-row>
			</a-form>
		</div>
		<a-button-group size="default" class="option">
			<a-button type="primary" @click="handleSearch">搜索</a-button>
			<a-button @click="handleReset">重置</a-button>
			<a-button type="primary" @click="exportList()">导出</a-button>
		</a-button-group>
		<div>
			<el-table
				ref="tableList"
				:data="data"
				v-loading="loading"
				border
				show-summary
				:summary-method="getSummaries"
				:max-height="tableHeight"
				highlight-current-row
				style="width: 100%;"
			>
				<el-table-column type="index" label="序号" width="60" fixed="left"></el-table-column>
				<el-table-column prop="DepartName" label="部门" min-width="140" fixed="left"></el-table-column>
				<el-table-column prop="examine1" label="审核中" min-width="160">
					<template slot-scope="scope">
						{{ scope.row.examine1 }}
						<!-- <div v-for="(item,i) in scope.row.Data" :key="i">{{ item.StateName }} - {{ item.Count }}</div> -->
					</template>
				</el-table-column>
				<el-table-column prop="examine2" label="审核通过(未申请完结)" min-width="160">
					<template slot-scope="scope">
						{{ scope.row.examine2 }}
						<!-- <div v-for="(item,i) in scope.row.Data" :key="i">{{ item.StateName }} - {{ item.Count }}</div> -->
					</template>
				</el-table-column>
				<el-table-column prop="examine3" label="待完结审核" min-width="160">
					<template slot-scope="scope">
						{{ scope.row.examine3 }}
						<!-- <div v-for="(item,i) in scope.row.Data" :key="i">{{ item.StateName }} - {{ item.Count }}</div> -->
					</template>
				</el-table-column>
				<el-table-column prop="examine4" label="已完结" min-width="160">
					<template slot-scope="scope">
						{{ scope.row.examine4 }}
						<!-- <div v-for="(item,i) in scope.row.Data" :key="i">{{ item.StateName }} - {{ item.Count }}</div> -->
					</template>
				</el-table-column>
				<el-table-column prop="total" label="活动总数" min-width="120"></el-table-column>
				<!-- <el-table-column prop="Data" label="明细" min-width="160">
					<template slot-scope="scope">
						<div v-for="(item,i) in scope.row.Data" :key="i">{{ item.StateName }} - {{ item.Count }}</div>
					</template>
				</el-table-column> -->
			</el-table>
			<!-- <el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="pagination.currentPage"
				:page-sizes="pagination.pageSizeOptions"
				:page-size="pagination.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="pagination.total"
			></el-pagination> -->
		</div>
	</div>
</template>

<script>
import moment from 'moment';
import Cache from '@/utils/cache';
import { DoGetSemesterListCommon, CommonDoGetActivityApplyTypeList, ManageReportDoGetActivityCountByState } from '@/api/follow';
const data = [];
export default {
	components: {},
	data() {
		return {
			data,
			form: this.$form.createForm(this, {
				name: 'advanced_search'
			}),
			semesterIDList: [],
			ApplyTypeList: [],
			pagination: {
				currentPage: 1,
				pageSize: this.global.pageSize,
				pageSizeOptions: this.global.pageSizeOptions, // 每页中显示的数据
				showTotal: total => `共有 ${total} 条数据` // 分页中显示总的数据
			},
			loading: false,
			values: {},
			tableHeight: parseFloat(window.innerHeight - 160),
			requestUrl: this.global.requestUrl,
			token: Cache.get('token')
		};
	},
	computed: {},
	created() {
		this.getList();
		this.getOtherList();
	},
	mounted() {},
	methods: {
		moment,
		async getOtherList() {
			let res1 = await CommonDoGetActivityApplyTypeList();
			this.ApplyTypeList = res1.data.data;
			let res = await DoGetSemesterListCommon();
			this.semesterIDList = res.data.data;
			// if (this.semesterIDList.length > 0) {
			// 	this.form.setFieldsValue({
			// 		semesterID: this.semesterIDList.filter(m => m.IsNow)[0].ID
			// 	});
			// 	this.getList();
			// }
		},
		handleSearch(e) {
			e.preventDefault();
			this.form.validateFields((error, values) => {
				this.pagination.currentPage = 1;
				if (values.data && values.data.length > 0) {
					values.startTime = values.data[0].format('YYYY-MM-DD');
					values.endTime = values.data[1].format('YYYY-MM-DD');
				}
				delete values.data;
				this.values = { ...this.values, ...values };
				this.getList();
			});
		},
		handleReset() {
			this.form.resetFields();
			// this.form.setFieldsValue({
			// 	semesterID: this.semesterIDList.filter(m => m.IsNow)[0].ID
			// });
			this.values = {};
			this.getList();
		},
		handleSizeChange(val) {
			this.pagination.pageSize = val;
			this.getList();
		},
		handleCurrentChange(val) {
			this.pagination.currentPage = val;
			this.getList();
		},
		async getList() {
			this.loading = true;
			let data = {};
			if (this.values) {
				data = this.values;
			}
			data.pageIndex = this.pagination.currentPage;
			data.pageSize = this.pagination.pageSize;
			let res = await ManageReportDoGetActivityCountByState(data);
			this.loading = false;
			// this.data = res.data.data;
			this.data = []
			let list = res.data.data;
			list.map((item)=>{
				this.data.push({
					...item,
					examine1: item.Data[0].Count,
					examine2: item.Data[1].Count,
					examine3: item.Data[2].Count,
					examine4: item.Data[3].Count,
				});
			})
			// const pagination = { ...this.pagination };
			// pagination.total = res.data.pageInfo.TotalItemCount;
			// this.pagination = pagination;
			this.$refs.tableList.bodyWrapper.scrollTop = 0;
		},
		getSummaries(param) {
			const {
				columns,
				data
			} = param
			const sums = []
			columns.forEach((column, index) => {
				console.log(column.property)
				if (index === 0) {
					sums[index] = '合计'
					return
				}
				if (index === 2 || index === 3 || index === 4 || index === 5 || index === 6) {
					const values = data.map(item => Number(item[column.property]))
					if (!values.every(value => isNaN(value))) {
						sums[index] = values.reduce((prev, curr) => {
							const value = Number(curr)
							if (!isNaN(value)) {
								return prev + curr
							} else {
								return prev
							}
						}, 0)
						sums[index] = Number(sums[index]).toLocaleString();
					} else {
						// sums[index] = '--';
					}
				}
			})
		
			return sums
		},
		exportList() {
			this.form.validateFields(async (error, values) => {
				let that = this;
				let data = {};
				if (values.data && values.data.length > 0) {
					values.startTime = values.data[0].format('YYYY-MM-DD');
					values.endTime = values.data[1].format('YYYY-MM-DD');
				}
				delete values.data;
				this.values = values;
				data = this.values;
				let res = await ManageReportDoGetActivityCountByState(data);
				let hrefUrl = that.requestUrl + 'Manage/Report/DoExportActivityCountByState?userToken=' + encodeURIComponent(that.token);
				let hrefStr = '';
				for (let key in data) {
					if (data[key]) {
						hrefStr += key + '=' + data[key] + '&';
					}
				}
				window.open(hrefUrl + '&' + hrefStr, '_blank');
			});
		},
		closeFun() {
			this.addIf = false;
			this.getList();
		}
	}
};
</script>

<style lang="less" scoped></style>
